<script setup lang="ts">
import { ref } from 'vue';
import Pane from './components/Pane.vue';
import BGPage from './components/BGPage.vue';
import Tables from './components/Tables.vue';
import EchartDemo from './components/EchartDemo.vue';
import EChartsStudy from './components/EChartsStudy.vue';
import ClassRomOnline from './components/ClassRomOnline.vue';


let isShowGifBG = ref(true)
</script>

<template>
  <div class="main">
    <BGPage v-if="isShowGifBG">
      <div class="title">
        <span>爱仪监控大屏</span>
      </div>
      <div>
        <div class="row1">
        <EchartDemo style="width: 100%; height: 40vh;" />
        <EChartsStudy style="width: 100%; height: 40vh;"></EChartsStudy>
        <pane style="width: 100%; height: 40vh;"></pane>
        </div>
        <div class="row2">
        <ClassRomOnline style="width: 67vw; height: 50vh;"></ClassRomOnline>
        <Tables style="width: 33vw; height: 50vh;"/>
        </div>
        
       

      </div>
    </BGPage>
  </div>
</template>

<style scoped>


.main{
  width: 100vw;
  height: 100vh;
}

.title{
  background-image: url(../images/title_bg.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 10%;
  
  display: flex;
  justify-content: center;
  align-items: center;
}

.title>span{
  font-size: 2.5vw;
  color: white;
}

.row1{
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}

.row2{
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}
</style>
